<template>
  <el-form ref="formRef" :model="form" label-width="70px">
    <el-form-item label="标题" prop="title" required>
      <el-input v-model="form.title" />
    </el-form-item>
    <el-form-item label="归属：" required>
      <el-select v-model="form.gradeLevel" placeholder="">
        <el-option value="1" label="计算机类"></el-option>
        <el-option value="2" label="管理类"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="内容：" required>
      <el-table :data="showpaper" style="width: 100%">
        <el-table-column prop="id" label="id" width="180" />
        <el-table-column prop="title" label="标题" width="180" />
        <el-table-column>
          <template v-slot="scope"
            ><el-button type="Danger" @click="deleteshow(scope.row.id)"
              >删除</el-button
            ></template
          >
        </el-table-column>
      </el-table>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button type="success" @click="addpaper">添加试卷</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item></el-form
  >
  <el-dialog
    v-model="dialogVisible"
    title="试卷添加"
    width="70%"
    :before-close="handleClose"
    ><el-card
      ><el-row :gutter="20" class="header"
        ><el-col :span="7"
          ><el-input
            v-model="queryForm.name"
            placeholder="请输入试卷id"
            tabindex="2"
            clearable
        /></el-col>
        <el-button type="primary" :icon="Search" @click="regetuser"
          >Search</el-button
        ></el-row
      ><el-table :data="tableData" stripe style="width: 100%">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          v-for="(item, index) in options"
          :key="index"
        >
          <template v-slot="{ row }" v-if="item.prop === 'createTime'">{{
            row.createTime1
          }}</template>
          <template #default="{ row }" v-else-if="item.prop === `action`">
            <el-button type="primary" size="small" @click="edituser(row)"
              >添加</el-button
            >
          </template>
        </el-table-column></el-table
      >
      <el-pagination
        v-model:currentPage="queryForm.pageIndex"
        v-model:page-size="queryForm.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    /></el-card>
  </el-dialog>
</template>

<script setup>
import Edit from './components/edit.vue'
import { getpaperlists, deletepaper, getpaperfromid } from '@/api/paper'
import { ref } from 'vue'
import { addtask } from '@/api/task'
import { ElMessage } from 'element-plus'
import { options } from './options2'
const order = ref(1)
const queryForm = ref({
  name: '',
  pageIndex: 1,
  pageSize: 10,
  role: 1
})
const form = ref({
  title: '',
  gradeLevel: '',
  paperItems: []
})
const dialogVisible = ref(false)
const submitForm = async () => {
  await addtask(form.value)
  ElMessage({
    message: '任务创建成功',
    type: 'success'
  })
  resetForm()
}

const addpaper = () => {
  dialogVisible.value = true
}
const showpaper = ref([])
const edituser = (row) => {
  ElMessage({
    message: '试卷添加成功',
    type: 'success'
  })
  showpaper.value.push({
    id: row.id,
    title: row.name
  })
  form.value.paperItems.push({
    id: row.id,
    itemOrder: order.value + 1
  })
  order.value = order.value + 1
  console.log(showpaper.value)
}

const resetForm = () => {
  form.value = {
    title: '',
    gradeLevel: '',
    paperItems: []
  }
  showpaper.value = []
}

const deleteshow = (id) => {
  console.log(id)
  for (let i = 0; i < showpaper.value.length; i++) {
    if (showpaper.value[i].id === id) {
      showpaper.value.splice(i, 1)
      break
    }
  }
}

const tableData = ref([])
const total = ref(0)
const inigetuser = async () => {
  const res = await getpaperlists(queryForm.value)
  tableData.value = res.data.data.list
  total.value = res.data.data.total
  console.log(tableData.value)
  for (let i in tableData.value) {
    tableData.value[i].createTime1 = tableData.value[i].createTime.substring(
      0,
      10
    )
  }
}
inigetuser()
</script>

<style lang="scss" scoped></style>
